<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 左侧内容 -->
      <el-col :span="16">
        <!-- 资源统计区域 -->
        <el-card class="resource-section">
          <div slot="header" class="card-header">
            <span>我的资源</span>
            <a href="#" class="link-more">提交支持网</a>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="resource-item">
                <div class="resource-icon light-blue">
                  <svg-icon icon-class="server" />
                </div>
                <div class="resource-info">
                  <div class="label">云服务器</div>
                  <span class="value">{{regionCount}}台</span>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="resource-item">
                <div class="resource-icon green">
                  <svg-icon icon-class="redis" />
                </div>
                <div class="resource-info">
                  <div class="label">云数据库</div>
                  <div class="value">1台</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="resource-item">
                <div class="resource-icon purple">
                  <svg-icon icon-class="lock" />
                </div>
                <div class="resource-info">
                  <div class="label">安全域名</div>
                  <div class="value">1个</div>
                </div>
              </div>
            </el-col>

          </el-row>
        </el-card>

        <!-- 安全卡片 -->
        <el-card class="security-card">
          <div slot="header" class="card-header">
            <span>安全</span>
          </div>
          <el-row :gutter="20" class="statistics-row">
            <el-col :span="6">
              <el-card shadow="hover" class="statistic-card">
                <div class="statistic-content">
                  <div class="statistic-icon">
                    <i class="el-icon-warning-outline"></i>
                  </div>
                  <div class="statistic-info">
                    <div class="statistic-label">安全事件</div>
                    <div class="statistic-value">{{ statistics.aqsl }}</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover" class="statistic-card risk">
                <div class="statistic-content">
                  <div class="statistic-icon">
                    <i class="el-icon-warning"></i>
                  </div>
                  <div class="statistic-info">
                    <div class="statistic-label">安全基线</div>
                    <div class="statistic-value">{{ statistics.jxsl }}</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover" class="statistic-card safe">
                <div class="statistic-content">
                  <div class="statistic-icon">
                    <i class="el-icon-success"></i>
                  </div>
                  <div class="statistic-info">
                    <div class="statistic-label">主机漏洞</div>
                    <div class="statistic-value">{{ statistics.ldsl }}</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover" class="statistic-card pending">
                <div class="statistic-content">
                  <div class="statistic-icon">
                    <i class="el-icon-time"></i>
                  </div>
                  <div class="statistic-info">
                    <div class="statistic-label">管家自检</div>
                    <div class="statistic-value">{{ statistics.zjsl }}</div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!-- 安全记录表格 -->
          <el-table :data="securityList" style="width: 100%; margin-top: 20px;">
            <el-table-column prop="vul_id" label="类型" width="100" />
            <el-table-column prop="vul_name" label="名称" />
            <el-table-column prop="scan_time" label="时间" width="180" >
              <template slot-scope="{ row }">
                <span>{{ formatTime(row.scan_time) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 右侧内容 -->
      <el-col :span="8">
        <!-- 客户信息卡片 -->
        <el-card class="user-info-section">
          <div class="user-profile">
            <div class="avatar-wrapper">
              <img :src="userimg || '/avatar.jpg'" class="user-avatar" alt="avatar">
            </div>
            <div class="user-details">
              <div class="user-name">
                <span class="name">{{ user.nickName }}</span>
                <span class="name">({{ user.userName }})</span>
                <span class="role">{{ roleGroup }}</span>
                <span class="role" v-if="user.dept" >{{ user.dept.deptName }} / {{ postGroup }}</span>
              </div>
              <div class="company">{{ user.company }}</div>
            </div>
          </div>
          <div class="user-stats">
<!--            <div class="stat-item">-->
<!--              <div class="value">38</div>-->
<!--              <div class="label">客户数</div>-->
<!--            </div>-->
<!--            <div class="stat-item">-->
<!--              <div class="value">92</div>-->
<!--              <div class="label">用户数</div>-->
<!--            </div>-->
            <div class="stat-item">
              <div class="value highlight">0</div>
              <div class="label">待续费</div>
            </div>
          </div>
        </el-card>

        <!-- 告警卡片 -->
        <el-card class="alert-card">
          <div slot="header" class="card-header">
            <span class="title">告警</span>
          </div>
          <div class="alert-stats">
            <div class="alert-item">
              <i class="el-icon-warning" style="color: #F56C6C;"></i>
              <span class="label">正在报警</span>
              <span class="value">0</span>
            </div>
            <div class="alert-item">
              <i class="el-icon-warning-outline" style="color: #E6A23C;"></i>
              <span class="label">高危</span>
              <span class="value">0</span>
            </div>
            <div class="alert-item">
              <i class="el-icon-info" style="color: #909399;"></i>
              <span class="label">重要</span>
              <span class="value">0</span>
            </div>
          </div>
        </el-card>

        <!-- 安全评分卡片 -->
        <el-card class="score-card">
          <div slot="header" class="card-header">
            <span>安全评分</span>
            <el-tooltip content="安全评分说明" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <div class="score-content">
            <el-progress type="circle" :percentage="93" :width="120">
              <template #default="{ percentage }">
                <div class="progress-content">
                  <span class="percentage">{{ percentage }}</span>
                  <span class="unit">分</span>
                </div>
              </template>
            </el-progress>
            <div class="score-desc">恭喜您，目前服务器安全状态良好，请继续保持。</div>
          </div>
        </el-card>

        <!-- 公告卡片 -->
<!--        <el-card class="announcement-card">-->
<!--          <div slot="header" class="card-header">-->
<!--            <span class="title">公告</span>-->
<!--            <a class="link-more">更多</a>-->
<!--          </div>-->
<!--          <div class="announcement-list">-->
<!--            <div class="announcement-item">-->
<!--              <div class="date">-->
<!--                <div class="month">01月</div>-->
<!--                <div class="day">16</div>-->
<!--              </div>-->
<!--              <div class="content">-->
<!--                <span class="tag">[产品动态]</span>-->
<!--                <span class="text">畅云管家全新小程序发布</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-card>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getUserProfile } from "@/api/system/user";
import store from "@/store";
import {listregioncount, listsecurecount, listsecureshow, security, statistics} from "@/api/resell/orderinstance";

export default {
  name: "Home",
  data() {
    return {
      userimg: store.getters.avatar,
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo",
      // 查询参数
      regionCount:{},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        resourceId: null,
        resourceName: null,
        regionCode: null,
        serviceTypeCode: null,
        resourceTypeCode: null,
        resourceSpecCode: null,
        serviceTypeName: null,
        resourceTypeName: null,
        projectId: null,
        productId: null,
        parentResourceId: null,
        isMainResource: null,
        status: null,
        effectiveTime: null,
        expireTime: null,
        expirePolicy: null,
        productSpecDesc: null,
        specSize: null,
        specSizeMeasureId: null,
        updateTime1: null,
        enterpriseProject: null,
        projectsId: null,
        projectsName: null,
        other1: null,
        other2: null,
        other3: null,
        other4: null,
        other5: null,
        puserid: null,//客户id
        pusertype: '07',//客户07  经销商06
        exptype:null,//到期天数类型1-30天，2-90天
        scode:1,
      },
      statistics: {
        jxsl: 0,
        ldsl: 0,
        aqsl: 0,
        zjsl: 0
      },
      securityList: [],

  };
  },
  created() {
    this.getUser();
    this.getRegionCount();
    this.getListsecureCount();
    this.getListsecureShow();
  },
  methods: {
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
        this.queryParams.puserid = this.$store.state.user.userId;

      });
    },
    getRegionCount() {
      console.log(this.queryParams)
      this.queryParams.puserid = this.$store.state.user.userId;
      listregioncount(this.queryParams).then(response => {
        console.log(response)
        this.regionCount=response.total
      });
    },
    getListsecureCount()
    {
      listsecurecount(this.queryParams).then(response => {
        console.log(response)
        this.queryParams.puserid = this.$store.state.user.userId;
        if(response.code==200) {
          const msgObj = JSON.parse(response.msg.replace(/(\w+):/g, '"$1":'));
          this.statistics.jxsl = msgObj.jxsl;
          this.statistics.ldsl = msgObj.ldsl;
          this.statistics.aqsl = msgObj.aqsl;
        }
      });
    },

    getListsecureShow()
    {
      this.queryParams.puserid = this.$store.state.user.userId;
      listsecureshow(this.queryParams).then(response => {
        console.log(response)
        if(response.code==200) {
          this.securityList=response.rows;
        }
      });
    },


  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 10px;
  background: #f0f2f5;
  min-height: 100vh;

  // 调整卡片间距
  .el-card {
    margin-bottom: 20px;
  }

  // 左侧内容样式
  .resource-section {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .link-more {
        color: #409EFF;
        font-size: 14px;
        text-decoration: none;
      }
    }

    .resource-item {
      display: flex;
      align-items: center;
      padding: 20px;
      background: #fff;
      border-radius: 4px;

      .resource-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;

        &.light-blue {
          background: #e6f7ff;
          color: #1890ff;
        }

        &.blue {
          background: #e6e6ff;
          color: #6666ff;
        }

        &.purple {
          background: #f0e6ff;
          color: #722ed1;
        }

        &.green {
          background: #e6fff0;
          color: #52c41a;
        }

        .svg-icon {
          font-size: 24px;
        }
      }

      .resource-info {
        .label {
          font-size: 14px;
          color: #666;
          margin-bottom: 4px;
        }

        .value {
          font-size: 20px;
          font-weight: 500;
          color: #333;
        }
      }
    }
  }


  .statistics-row {
    margin-bottom: 20px;
  }

  .statistic-card {
    height: 100px;
  }

  .statistic-content {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .statistic-icon {
    font-size: 32px;
    margin-right: 15px;
    color: #409EFF;
  }

  .statistic-card.risk .statistic-icon {
    color: #F56C6C;
  }

  .statistic-card.safe .statistic-icon {
    color: #67C23A;
  }

  .statistic-card.pending .statistic-icon {
    color: #E6A23C;
  }

  .statistic-info {
    display: flex;
    flex-direction: column;
  }

  .statistic-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 5px;
  }

  .statistic-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }

  // 右侧内容样式
  .user-info-section {
    background: linear-gradient(to right, #6191f8, #3a59e4);
    color: #fff;
    height: 178px;

    ::v-deep .el-card__body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px;
    }

    .user-profile {
      display: flex;
      align-items: center;

      .avatar-wrapper {
        margin-right: 16px;

        .user-avatar {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          border: 2px solid rgba(255, 255, 255, 0.2);
        }
      }

      .user-details {
        .user-name {
          display: flex;
          align-items: center;
          margin-bottom: 8px;

          .name {
            font-size: 20px;
            font-weight: 500;
            margin-right: 12px;
          }

          .role {
            font-size: 14px;
            background: rgba(255, 255, 255, 0.1);
            padding: 2px 8px;
            border-radius: 12px;
          }
        }

        .company {
          font-size: 14px;
          opacity: 0.8;
        }
      }
    }

    .user-stats {
      display: flex;
      gap: 48px;

      .stat-item {
        text-align: center;

        .value {
          font-size: 28px;
          font-weight: 500;
          margin-bottom: 4px;

          &.highlight {
            color: #fbbf24;
          }
        }

        .label {
          font-size: 14px;
          opacity: 0.8;
        }
      }
    }
  }

  .alert-card,
  .score-card,
  .announcement-card {
    .card-header {
      .title {
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
}

::v-deep .el-card {
  border-radius: 4px;
  border: none;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .el-card__header {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
  }
}

::v-deep .el-table {
  .el-table__header th {
    background: #fafafa;
    color: #666;
  }
}

::v-deep .user-info-section.el-card {
  border: none;

  .el-card__body {
    padding: 24px;
  }
}

::v-deep .el-tag {
  margin-right: 8px;

  &.el-tag--danger {
    background: rgba(245, 108, 108, 0.1);
    border-color: rgba(245, 108, 108, 0.2);
    color: #f56c6c;
  }

  &.el-tag--warning {
    background: rgba(230, 162, 60, 0.1);
    border-color: rgba(230, 162, 60, 0.2);
    color: #e6a23c;
  }

  &.el-tag--info {
    background: rgba(144, 147, 153, 0.1);
    border-color: rgba(144, 147, 153, 0.2);
    color: #909399;
  }
}
</style>

